<template>
  <view @click="isMore = false">
    <view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
      <back :page-scroll-top="PageScrollTop"/>
    </view>
    <!-- banner，标题 -->
    <view class="banner-title">
      <!-- banner -->
      <view class="banner">
        <swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
          <swiper-item v-for="(item, index) in goodsInfo.imgs" :key="index">
            <image :src="item" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
	  <view class="price-info">
	  	<view class="user-price">
	  		<text class="max">￥{{goodsInfo.price}}</text>
	  	</view>
<!--	  	<view class="vip-price">
	  		零售价
	  		<text>￥{{goodsInfo.price}}</text>-->
<!--	  	</view>-->
	  </view>
	 
		
      <!-- 标题 -->
      <view class="goods-title">
        <text>{{goodsInfo.title}}</text>
      </view>
     
    </view>
 

   
 
    <!-- 商品介绍 -->
    <view class="products-introduction" ref="products">
      <view class="title">
        <text>商品介绍</text>
      </view>
      <view class="content" v-html="goodsInfo.details"></view>
    </view>
    <!-- 底部 -->
    <view class="page-footer">
     
      <view class="footer-buy">
        <view class="buy-at" @click="confimOrder(goodsInfo.id)" :style="`background: ${goodsInfo.buy_allow == 0?'#ddd':''};`">
          <text>立即购买</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
import back from "@/components/headback/back.vue";
export default {
  components: {
    back,
  },
  data() {
    return {
	  addressInfor:{},
      TabShow: 0,
      isMore: false,
      AttentionShow: 0,
	    goodsInfo:{},
      swiperList: [],
      web_content:
          '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
      PageScrollTop: 0,
			type: 0,
			id:0,
    };
  },
	onLoad(params) {
		this.id = params.id||0;
		this.getGoodsDetails()
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	onPageScroll(e) {
		this.PageScrollTop = e.scrollTop;
	},

  methods: {
	  // 详情
	  getGoodsDetails(){
	  	this.$u.api.goodsListDetail({goods_id:this.id}).then(res => {
	  			if (res.status) {
	  				this.goodsInfo = res.msg
	  			}
	  		})
	  		.catch(err => {
	  			console.log(err);
	  		})
	  },
	  // 购买
	  confimOrder(id){
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}else{
        if(this.goodsInfo.buy_allow == 0){
          return ;
        }
			/*	if(this.goodsInfo.flag=='vip'&&this.goodsInfo.sw_level>=1){
					uni.showToast({
						title: '新人福利仅限购买一次',
						icon: 'none',
						duration: 3000,
						success(){
							// uni.navigateBack()
						}
					});
				}else{*/
					uni.navigateTo({url:'/pages/ConfirmOrder/ConfirmOrder?id='+this.id})
				// }
			}
			return false
		  
	  },
    /**
     * 返回
     */
    onBack() {
      uni.navigateBack();
    },
  }
};
</script>

<style scoped lang="scss">
@import 'GoodsDetails.scss';
	
</style>
